<template>
  <div class="createClass">
    <el-form ref="classForm" :model="classForm" :rules="classRules" label-width="120px">
      <el-form-item label="班级名称" prop="className">
        <el-input
          v-model="classForm.className"
          placeholder="最多输入16个字"
          max="16"
          style="width:480px"
        />
      </el-form-item>
      <el-form-item label="选择课程" prop="belongCourse">
        <el-button v-if="!classForm.belongCourse" @click="showDialog">选择课程</el-button>
        <div v-if="classForm.belongCourse" class="course-tag">
          <div class="course-title">{{ classForm.belongCourse }}</div>
          <el-button v-if="classForm.belongCourse&&!classStudentId" @click="showDialog">更换课程</el-button>
        </div>
      </el-form-item>
      <el-form-item label="开班日期" prop="startTime">
        <el-date-picker
          v-model="classForm.startTime"
          :picker-options="pickerOptions0"
          type="date"
          placeholder="选择开始日期"
        />
        <span style="margin:0 10px;">至</span>
        <el-date-picker
          v-model="classForm.endTime"
          :picker-options="pickerOptions1"
          type="date"
          placeholder="选择结束日期"
        />
      </el-form-item>
      <el-form-item label="人数上限" prop="maxPerson">
        <el-input v-model="classForm.maxPerson" style="width:480px">
          <template slot="append">人</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="stepBtn">
      <el-button @click="stepCancel">取消</el-button>
      <el-button type="primary" @click="stepConfirm">确定</el-button>
    </div>
    <!-- 选择课程弹框 -->
    <createCourseDialog
      :dialog="selectCourseDialog"
      @cancelClick="cancelClick"
      @confirmClick="confirmClick"
    />
  </div>
</template>

<script>
import createCourseDialog from './coursedialog'
export default {
  components: {
    createCourseDialog
  },
  data() {
    return {
      classStudentId: '',
      selectCourseDialog: false,
      classForm: {
        className: '',
        belongCourseId: '',
        belongCourse: '',
        startTime: '',
        endTime: '',
        maxPerson: ''
      },
      classRules: {
        className: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
        belongCourse: [{ required: true, message: '请选择课程', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        maxPerson: [{ required: true, message: '请输入人数上限', trigger: 'blur' }]
      },
      belongCourseRadio: '',
      belongCourseName: '',
      // 开始时间限制
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.classForm.endTime) {
            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.classForm.endTime;
          } else {
            return time.getTime() < Date.now() - 8.64e7;
          }
        }
      },
      // 结束时间限制
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() < this.classForm.startTime
        }
      },
    }
  },
  mounted() {
    // 如果有id，获取id对应的数据
    this.classStudentId = this.$route.query.classId
  },
  methods: {
    showDialog() {
      this.selectCourseDialog = true
    },
    cancelClick() {
      this.selectCourseDialog = false
    },
    confirmClick(data) {
      this.selectCourseDialog = false
      this.classForm.belongCourseId = data.id
      this.classForm.belongCourse = data.name
    },
    stepCancel() {
      this.$refs.classForm.resetFields()
      this.$router.go(-1)
    },
    stepConfirm() {
      // 提交表单
      this.$refs.classForm.validate((valid) => {
        if (valid) {
          this.$refs.classForm.resetFields()
          this.$router.go(-1)
        } else {
          return false
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.createClass {
  padding: 20px;
  padding-top: 40px;
  .course-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 480px;
    height: 60px;
    padding: 10px 20px 10px 10px;
    color: #353535;
    font-size: 0;
    background: #f5f7fa;
    .course-title {
      width: 210px;
      overflow: hidden;
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .stepBtn {
    margin:40px 0 0 250px;
  }
}
</style>
